<template>
  <div class="home">
    <ScreeningComponent
      :isShowScreen="isShowScreen"
      @callScreeningHandler="callScreeningHandler"
    />
    <section class="header">
      <div class="cityList" ref="cityList">
        <div
          v-for="city in cityList"
          :key="city.index"
          @click.stop="
            location = city.text;
            selectCityHandler();
            getDataList();
          "
        >
          {{ city.text }}
        </div>
      </div>
      <div class="search-city" @click="selectCityHandler">
        <div class="city-all">
          <span class="city-select">{{ location }}</span>
          <div class="triangle">
            <img src="@/../public/images/1668216788954.png" alt="" />
          </div>
        </div>
      </div>
      <van-search
        class="search"
        v-model="kw"
        shape="round"
        background="#149639"
        placeholder="请输入搜索关键词"
        @search="searchHandler"
        @input="searchHandler"
      />
    </section>
    <van-swipe height="145" :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image" />
      </van-swipe-item>
    </van-swipe>

    <div class="content">
      <nav class="nav">
        <div class="nav-left">
          <div
            class="nav-left-item active"
            ref="new"
            @click.stop="
              callDataList({
                kw,
                location,
                page,
                size,
                isNews: 1,
                isRecommend: 0,
              });
              $refs.new.classList.add('active');
              $refs.recom.classList.remove('active');
              $refs.mask.style.left = '0';
              isNews = 1;
            "
          >
            最新
          </div>
          <div
            class="nav-left-item"
            ref="recom"
            @click.stop="
              callDataList({
                kw,
                location: '',
                page,
                size,
                isNews: 0,
                isRecommend: 1,
              });
              $refs.recom.classList.add('active');
              $refs.new.classList.remove('active');
              $refs.mask.style.left = '0.9rem';
              isNews = 0;
            "
          >
            推荐
          </div>
          <div class="mask" ref="mask"></div>
        </div>
        <div class="nav-right" @click.stop="callScreeningHandler">筛选</div>
      </nav>
      <section class="position-list">
        <JobComponent
          v-for="listItem in jobsList"
          :key="listItem._id"
          :listItem="listItem"
        />
        <div class="call-more" @click="getMoreHandler">{{ how }}</div>
      </section>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import JobComponent from "@/components/JobComponent.vue";
import ScreeningComponent from "@/components/ScreeningComponent.vue";
export default {
  name: "HomeView",
  components: {
    JobComponent,
    ScreeningComponent,
  },
  data() {
    return {
      how: "加载更多",
      add: false,
      loading: false,
      finished: false,
      isShowScreen: false,
      intercept: false,
      timer: null,
      kw: "",
      location: "广州",
      page: 1,
      size: 5,
      isNews: 1,
      images: [
        "https://mina.52kfw.cn/uploads/attach/2022/06/20220613/745f4d285c8499a83c30ea7483380660.jpg",
        "https://mina.52kfw.cn/uploads/attach/2022/06/20220613/d5c0d51da2372060959d5739fe445e42.jpg",
        "https://mina.52kfw.cn/uploads/attach/2022/06/20220613/8392235884f2f3e51cc0a8f9a1c5d5f4.jpg",
      ],
      jobsList: null,
      index: 0,
      cityList: [{ text: "广州", value: 0 }],
    };
  },
  computed: {
    isRecommend() {
      return this.isNews == 1 ? 0 : 1;
    },
  },
  methods: {
    //加载更多
    getMoreHandler() {
      this.page++;
      this.add = true;
      this.getDataList();
    },
    //呼叫筛选框
    callScreeningHandler({ tag }) {
      this.isShowScreen = !this.isShowScreen;
      tag;
      // if (tag) this.kw = tag;
    },
    //搜索
    searchHandler() {
      if (this.intercept) return;
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.page = 0;
        this.how = "加载更多";
        this.getDataList();
      }, 500);
    },
    //选择城市
    selectCityHandler() {
      let cityListStyle = getComputedStyle(this.$refs.cityList);
      if (cityListStyle.bottom == "0px") {
        this.$refs.cityList.style.bottom = "-" + cityListStyle.height;
        // this.$refs.cityList.style.opacity = 1;
      } else {
        this.$refs.cityList.style.bottom = "0px";
        // this.$refs.cityList.style.opacity = 0;
      }
    },
    //获取城市
    getCityList() {
      this.axios.get("/v1/company/city-list").then((res) => {
        let data = res.data.data;
        let temp = [];
        [].forEach.call(data, (value, index) =>
          temp.push({ text: value, value: index })
        );
        this.cityList = temp;
      });
    },
    //获取岗位数据
    getDataList() {
      this.callDataList({
        kw: this.kw,
        location: this.location,
        page: this.page,
        size: this.size,
        isNews: this.isNews,
        isRecommend: this.isRecommend,
      });
    },
    callDataList({
      kw = "",
      location = "",
      page = 1,
      size = 5,
      isNews = 1,
      isRecommend = 0,
    }) {
      this.intercept = true;
      this.axios
        .get("/v1/company/work-list", {
          params: {
            kw,
            location,
            page,
            size,
            isNews,
            isRecommend,
          },
        })
        .then((res) => {
          let { list } = res.data.data;
          if(list?.length<=0)this.how="暂无更多";
          if (this.add) {
            this.jobsList = [...this.jobsList, ...list];
            this.add = false;
          } else {
            this.jobsList = list;
          }
          this.intercept = false;
          //制造聊天界面假数据
          localStorage.setItem("listItem", JSON.stringify(this.jobsList[0]));
        });
    },
  },
  created() {
    this.callDataList({
      kw: "",
      location: this.location,
      page: 1,
      size: 5,
      isNews: 1,
      isRecommend: 0,
    });
    this.getCityList();
  },
};
</script>
<style lang="scss" scoped>
.active {
  color: #149639 !important;
}
.home {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  color: #000;
  .header {
    position: sticky;
    display: flex;
    align-items: center;
    font-size: 0.28rem;
    box-sizing: border-box;
    padding: 0 0.29rem;
    width: 100%;
    height: 1rem;
    background-color: #149639;
    left: 0;
    top: 0;
    z-index: 10;
    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #149639;
      left: 0;
      top: 0;
      z-index: -1;
    }
    > div {
      z-index: 100;
      background-color: #149639;
    }
    .cityList {
      position: absolute;
      z-index: -2;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #fff;
      transition: 0.5s;
      // opacity: 0;
      > div {
        width: 100%;
        height: 1rem;
        font-size: 0.3rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        padding: 0 0.3rem;
      }
    }
    .search {
      box-sizing: border-box;
      flex-grow: 1;
      padding: 0;
    }
    .search-city {
      position: relative;
      font-size: 0.36rem;
      font-weight: 500;
      color: #ffffff;
      line-height: 0.7rem;
      div {
        display: flex;
        align-items: center;
        .triangle {
          width: 0.26rem;
          height: 0.18rem;
          margin: 0.08rem 0.31rem 0 0.2rem;
        }
      }
    }
  }
  .content {
    position: relative;
    z-index: 1;
    .nav {
      height: 0.92rem;
      width: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.3rem;
      padding: 0.3rem 0.3rem 0 0.3rem;
      color: #333;
      .nav-left {
        position: relative;
        display: flex;
        font-weight: 500;
        line-height: 0.7rem;
        font-weight: 500;
        > div {
          margin-right: 0.31rem;
        }
        .active {
          color: #149639;
        }
        .mask {
          position: absolute;
          margin: 0;
          width: calc((100% - 0.62rem) / 2);
          height: 0.04rem;
          background: #149639;
          bottom: 0;
          left: 0;
        }
      }
      .nav-right {
        width: 1rem;
        height: 0.5rem;
        background: #f4f4f4;
        border-radius: 0.08rem;
        text-align: center;
        font-size: 0.24rem;
        line-height: 0.5rem;
      }
    }
    .position-list {
      width: 100%;
      box-sizing: border-box;
      color: #333333;
      padding-bottom: 1.2rem;
      .call-more {
        height: 1rem;
        font-size: 0.3rem;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
